<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台</title>
	 <link rel="stylesheet" type="text/css" href="/css/css.css">
	 <link rel="stylesheet" type="text/css" href="/font-awesome-4.7.0/css/font-awesome.min.css">
	 <link  rel="stylesheet" type="text/css" href="/css/lyz.calendar.css" />
	  <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
	  <script src='/js/jquery.js'></script>
	 <script src='/layui/layui.js'></script>
</head>
<style>
  .class_,.class,.page_a,.a_page{float:left;;text-align:center;line-height:25px;border-radius:3px;font-size:14px; margin-left:4px;}
   .class_{
      background:#efefef;
	  width:60px;
	  height:25px;
	  color:white;
   }
   .class{
       background:#ccffff;
	  width:60px;
	  height:25px;
   }
   .page_a{
      width:20px;
	  height:25px;
	  background:#efefef;
	  margin-left:4px;
	  color:white;
   }
   .a_page{
      width:20px;
	  height:25px;
	  background:#ccffff;
	  margin-left:4px;
   }
</style>
<body>
	{include file='index/public/header'}
<div class="left">
{include file='index/public/left'}
</div>
<div id="right">
<form class='layui-form'>
 <table width="84.8%"  border='0' cellspacing="0" cellpadding="0" style='background:white;' >
         <tr>
		    <th>商品名</th>
		    <th>缩略图</th>
		    <th>分类</th>
		    <th>品牌</th>
		    <th>销量</th>
		    <th>操作</th>
		 </tr>
{foreach $sp as $v}
          <tr align='center'>
               <td>{$v['sp_name']}</td>
               <td><img src='{$img[$v["id"]]}' width='50px'/></td>
			   <td>{$fl[$v['fl_id']]}</td>
			   <td>{$brand[$v['brand_id']]['brand_name']}</td>
			   <td>{$v['sp_shop_num']}</td>
			   <td><input type="checkbox"    src='{$img[$v["id"]]}' spid='{$v["id"]}' name="lbt" lay-skin="switch" lay-filter="switchTest" lay-text="设为轮播图|取消轮播图"></td>
          </tr>
 {/foreach}
          <!--<tr style='height:30px;box-shadow:-1px 4px 5px #ccc;'>
          </tr>-->
        </table>
</form>
<span>{$fy['up_page']}</span> <span style='margin-left:10px;'>{$fy['number_page']}</span> <span>{$fy['down_page']}</span>
 <ul id='lbt'> </ul>
</div>
</body>
</html>
<script>
layui.use(['form','layer'],function(){
	  var layer=layui.layer;
      var form=layui.form;
	  var $=layui.jquery;
      var img=[];
	  var spid=[];
	form.on('switch(switchTest)', function(){
        if($(this).prop('checked')){
		  spid[spid.length]=$(this).attr('spid');
		   img[img.length]=$(this).attr('src');
		}else{
		    var src=img.indexOf($(this).attr('src'));
		    var id=spid.indexOf($(this).attr('spid'));
			 img.splice(src,1);
			 spid.splice(id,1);
		}
		$.ajax({
		   url:'/admin.php/homeinfo/lbt_save',
		   data:{'lbt':(img==''?'del':img),'spid':(spid==''?'del':spid)},
		   dataType:'json',
		   type:'post',
		   success:function(res){
		      if(res.status=='ok'){
			      html_li();
			  }
		   }
		});

		 
    });


var html_li=function(){
        var str='';
				     for(var i in img){
						 if(i==0){
						       str+='<li style="margin:0px;"><img src="'+img[i]+'" width="100%" height="100%"/></li>';
						 }else{
					           str+='<li><img src="'+img[i]+'" width="100%" height="100%"/></li>';
						   }
						$('input[src="'+img[i]+'"]').prop('checked',true);
						}
		$('#lbt').html(str);
       form.render();
};

     window.img=function(){
		 var index = layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
          });
	    $.ajax({
		   url:'/admin.php/homeinfo/lbt_list',
		   dataType:'json',
		   success:function(res){
		       if(res.status=='ok'){
			         img=res.lbt;
					 spid=res.spid;
                     html_li();
			   }else{
			        layer.msg('轮播图数据加载失败！',{time:1600,icon:7});
			   }
			       layer.close(index);
		   }
		});
	}();

});



</script>
<style>
body{
 background:#f5f5f5;

}
a{text-decoration:none;}
table tr td,table tr th{
   border-bottom:1px solid #efefef;
	border-left:1px solid #efefef;
	font-size:14px;
}
    table tr td{
    height: 50px;
   }
   table tr th{
    font-weight:normal;
	font-size:16px;
   }


#right #lbt{
   width:100%;
   margin-top:20px;
}
#right #lbt li{
   float:left;
   width:100px;
   height:100px;
   border-radius:3px;
   background-image:url(/image/file_img.jpg);
   background-repeat:no-repeat;
   background-size:100% 100%;
   margin-left:10px;
}


</style>